<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试layui</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
    <script src="./layui/layui.js"></script>
</head>

<body>
<form class="layui-form" action="" id="addRec" style="display: none">

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">原文</label>
        <div class="layui-input-block">
            <textarea name="fromText"  placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">语言</label>
        <div class="layui-input-block">
            <select name="lang" lay-verify="required">
                <option value="en">英语</option>
                <option value="jp">日语</option>
                <option value="fra">法语</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">翻译结果</label>
        <div class="layui-input-block">
            <textarea name="toText" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<form class="layui-form" action="" id="updateRec" style="display: none" lay-filter="updateForm">
    <input type="hidden" name="id"/>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">原文</label>
        <div class="layui-input-block">
            <textarea name="fromText"  readonly  placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">语言</label>
        <div class="layui-input-block">
            <input type="text" name="lang" readonly autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">翻译结果</label>
        <div class="layui-input-block">
            <textarea name="toText" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateFormSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">批量删除</button>
        <button  class="layui-btn  layui-btn-warm layui-btn-sm" onclick="toTranslationPage()">在线翻译</button>
    </div>
</script>
</body>
<script>
    function toTranslationPage(){
        window.location.href="index.html";
    }
    layui.use(['table','jquery','layer','form'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 500
            ,url: 'transRec' //数据接口
            ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg":"", //解析提示文本
                    "count": res.totalElements, //解析数据长度
                    "data": res.content //解析数据列表
                };
            }
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'fromText', title: '原文', width:400}
                ,{field: 'lang', title: '语言', width:80, sort: true}
                ,{field: 'toText', title: '翻译结果', width:400}
                ,{field: 'transDate', title: '翻译时间', width: 160}
                ,{fixed: 'right', title: '操作', width: 150, align:'center', toolbar: '#barDemo'}

            ]]
        });

        // 单元格工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'delete'){
                layer.confirm('真的删除行么', function(index){
                    /*obj.del(); //删除对应行（tr）的DOM结构*/
                    $.ajax({
                        url: "transRec",//请求的后端接口路径
                        data: {"id": data.id, },//传递给后台的参数
                        dataType: "json",//相应的数据类型：服务器给我的
                        type: "delete",//请求的类型，get，post,delete,option
                        success: function (dataInfo) {//请求成功之后的回调函数
                            if(dataInfo){
                                layer.close(index);
                                table.reload("demo");
                                layer.msg("删除成功")
                            }else{
                                layer.close(index);
                                layer.msg("删除失败")
                            }


                        }
                    })


                });
            }else  if(layEvent === 'update'){
                layer.open({
                    title:'修改记录',
                    type: 1,
                    content: $('#updateRec'),
                    area:['500px','400px']
                });
                //填充表单数据
                //给表单赋值
                form.val("updateForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "fromText": data.fromText
                    ,"lang": data.lang
                    ,"toText": data.toText
                    ,"id":data.id
                });
            }
        });
        // 头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.open({
                        title:'添加记录',
                        type: 1,
                        content: $('#addRec'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        area:['500px','400px']
                    });
                    break;

                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        //循环所有选中的行，并且将每一行的id保存到数组ids中
                        var ids=[];
                        for (let i = 0; i < data.length; i++) {
                            ids[i]=data[i].id;
                        }
                        //     执行删除逻辑
                        layer.confirm('真的删除行么', function(index){
                            /*obj.del(); //删除对应行（tr）的DOM结构*/
                            $.ajax({
                                url: "transRec/batchDelete",//请求的后端接口路径
                                data: {"ids": ids.join(","), },//传递给后台的参数
                                dataType: "json",//相应的数据类型：服务器给我的
                                type: "post",//请求的类型，get，post,delete,option
                                success: function (dataInfo) {//请求成功之后的回调函数
                                    if(dataInfo){
                                        layer.close(index);
                                        table.reload("demo");
                                        layer.msg("删除成功")
                                    }else{
                                        layer.close(index);
                                        layer.msg("删除失败")
                                    }


                                }
                            })


                        });
                    }
                    break;
            };
        });

       form.on('submit(addForm)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                url: "transRec",//请求的后端接口路径
                data: data.field,//传递给后台的参数
                dataType: "json",//相应的数据类型：服务器给我的
                type: "post",//请求的类型，get，post,delete,option
                success: function (dataInfo) {//请求成功之后的回调函数
                    if(dataInfo){
                        layer.closeAll();
                        table.reload("demo",{
                            page: {curr:1}
                        });
                        layer.msg("添加成功")
                    }else{
                        layer.closeAll();
                        layer.msg("添加失败,记录重复")
                    }


                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(updateFormSubmit)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            console.log("开始编辑");
            $.ajax({
                url: "transRec",//请求的后端接口路径
                data: data.field,//传递给后台的参数
                dataType: "json",//相应的数据类型：服务器给我的
                type: "put",//请求的类型，get，post,delete,option
                success: function (dataInfo) {//请求成功之后的回调函数
                    console.log(dataInfo)
                    if(dataInfo){
                        layer.closeAll();
                        table.reload("demo");
                        layer.msg("修改成功")
                    }else{
                        layer.closeAll();
                        layer.msg("修改失败")
                    }


                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</html>
